<style lang="less" scoped>
  .index {
    background: #f8f8f9;
  }
  .loading {
    animation: myloading 1s linear infinite;
    margin-top: 100px;
  }
  @keyframes myloading {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .question_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .ques_content {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .xuanxiang {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .card_row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .edit_out {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
  }

  .ques_content {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .ques_content p:first-of-type{
    font-weight: bold;
  }
  .xuanxiang {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .check{
    position: absolute;
    left: -40px;
  }
</style>

<template>
  <div id="index">
    <myheader></myheader>
    <Layout :style="bg" id="content">
      <Layout :style="{padding: '24px 24px'}">
        <div class="question_list">
          <div v-if="questions.length === 0 && section !== ''">没有题目～</div>
          <div v-for="(ques,index) in questions" class="card_row" :key="index">
            <Card style="width:600px;margin-bottom: 20px">

                <div class="ques_content">
                  <div class="check" v-if="show && ques.type === 'panduan'">
                    <el-button type="success" icon="el-icon-check" circle size="mini" v-if="select_value[index]===ques.answer[0]"></el-button>
                    <el-button type="danger" icon="el-icon-close" circle size="mini" v-else></el-button>
                  </div>
                  <div class="check" v-if="show && ques.type === 'xuanze'">
                    <el-button type="success" icon="el-icon-check" circle size="mini" v-if="select_value[index].toString() === ques.answer.toString()"></el-button>
                    <el-button type="danger" icon="el-icon-close" circle size="mini" v-else></el-button>
                  </div>
                  <p v-if="ques.bloom === 1">(布鲁姆认知层次：记忆)</p>
                  <p v-if="ques.bloom === 2">(布鲁姆认知层次：理解)</p>
                  <p v-if="ques.bloom === 3">(布鲁姆认知层次：应用)</p>
                  <p v-if="ques.bloom === 4">(布鲁姆认知层次：分析)</p>
                  <p v-if="ques.bloom === 5">(布鲁姆认知层次：综合)</p>
                  <p v-if="ques.bloom === 6">(布鲁姆认知层次：评价和创造)</p>
                  <div v-html="ques.question"></div>

                  <RadioGroup
                          class="out"
                          v-if="ques.type === 'panduan'"
                          v-model="select_value[index]"
                          :key="toString(Math.random())"
                  >
                    <Radio label="yes">
                      <span>对</span>
                    </Radio>
                    <Radio label="no">
                      <span>错</span>
                    </Radio>
                  </RadioGroup>

                  <CheckboxGroup
                          class="xuanxiang"
                          v-if="ques.type === 'xuanze'"
                          v-model="select_value[index]"
                          :key="toString(Math.random())"
                  >
                    <Checkbox
                            v-for="(item, index) in ques.items"
                            :label="index + 1 + ''"
                            :key="index"
                    >
                      <span>{{item}}</span>
                    </Checkbox>
                  </CheckboxGroup>
                </div>
                <div v-if="show">
                  <div v-if="ques.type === 'panduan'">
                    答案：
                    <p v-if="ques.answer[0] === 'yes'">对</p>
                    <p v-if="ques.answer[0] === 'no'">错</p>
                  </div>
                  <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                    <!--<div v-for="(item, index) in ques.items">{{index + 1}}、 {{item}}</div>-->
                  </div>
                  <div v-if="ques.type === 'xuanze'">
                    答案：
                    <p v-for="(ans, index) in ques.answer" :key="index">{{ans}}</p>
                  </div>答案解析：
                  <div v-html="ques.illustrationContent"></div>
                </div>

            </Card>

            <div class="edit_out">
              <div
                      v-if="userGroup === '1' || userGroup === '2' ||userGroup === '3'"
                      @click="editQuestion(ques)"
              >
                <a>编辑这个题目</a>
              </div>
              <div
                      v-if="userGroup === '1' ||userGroup === '3'"
                      style="margin-top:10px"
                      @click="deleteThisQuestion(ques, index)"
              >
                <a style="color: red">删除这个题目</a>
              </div>
            </div>
          </div>
          <Button type="primary" @click="submit">提交并查看解析</Button>
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
    import header from "../components/header.vue";
    import { getMenu, queryQuestion, deleteQuestion } from "../api/api";
    export default {
        name: "questions",
        data: function() {
            return {
                bg: {
                    width: `${window.innerWidth}px`,
                    height: "auto",
                    overflow: "scroll"
                },
                menu: [],
                questions: [],
                section: "",
                userGroup: "",
                select_value: [],
                show:false
            };
        },
        mounted() {
          window.onresize = () => {
            return (() => {
              let content_top = document.getElementById("content").offsetTop;
              this.bg.height = `${window.innerHeight - content_top}px`;
              this.bg.width = `${window.innerWidth}px`;
            })();
          };
          let content_top = document.getElementById("content").offsetTop;
          this.bg.height = `${window.innerHeight - content_top}px`;
          this.userGroup = JSON.parse(this.$store.state.user).userGroup;

          this.queryQuestions(this.$route.params.menu)
        },
        components: {
            myheader: header
        },
        methods: {
            submit() {
                for(let i=0;i<this.questions_num;i++){
                  if(!this.select_value[i]){
                      this.$Message.error("您还有未做题目！");
                      return;
                  }
                  if(Array.isArray(this.select_value[i])){
                      this.select_value[i].sort();
                  }
                }
                collect_pro({
                    menu: this.$route.params.menu,
                    answer: this.select_value
                })
                    .then(response => {
                        if (response.state === true) {
                            this.show = true;
                        } else {
                            this.$Message.error(response.msg);
                        }
                    })
                    .catch(error => {
                        this.$Message.error(error.status);
                    });


            },
            queryQuestions(section, name) {
                this.section = name;
                let mark = "error";
                queryQuestion({ section , mark })
                    .then(response => {
                        if (response.state === true) {
                            this.questions = response.result;
                            this.questions_num = response.result.length;
                        } else {
                            this.$Message.error(response.msg);
                        }
                    })
                    .catch(error => {
                        this.$Message.error(error.status);
                    });
            },
            editQuestion(ques) {
                this.$router.push({
                    name: "giveQuestion",
                    params: {
                        state: "edit",
                        question: ques
                    }
                });
            },
            deleteThisQuestion(ques, idx) {
                this.$Modal.confirm({
                    title: "确认",
                    content: "确认要删除这个题目吗？",
                    onOk: () => {
                        deleteQuestion({
                            _id: ques._id
                        })
                            .then(response => {
                                if (response.state === true) {
                                    this.$Message.success("删除成功");
                                    this.questions.splice(idx, 1);
                                } else {
                                    this.$Message.error("删除失败！ " + response.msg);
                                }
                            })
                            .catch(error => {
                                this.$Message.error(error.status);
                            });
                    }
                });
            }
        }
    };
</script>